<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title>用户分析</title>
    <div data-th-replace="layout/head-top"></div>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInLeft">
        <div>
            <h4>
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript:void(0)"><i class="fa fa-home"></i> <span>统计</span></a>
                    </li>
                    <li>
                        <strong>用户分析</strong>
                    </li>
                </ol>
            </h4>
        </div>

        <div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>用户趋势看板</h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <select class="form-control" id="user-time-type">
                                    <option value="1">今日</option>
                                    <option value="5">昨日</option>
                                    <option value="2" selected="selected">近7天</option>
                                    <option value="3">近30天</option>
                                    <option value="4">自定义</option>
                                </select>
                                <!--今日，近7天，近30天显示格式-->
                                <section class="checkbox ml10 hide time-box">
                                    <span class="fs14 c-333">2018-12-05</span>
                                    <span class="fs14 c-999"> 至 </span>
                                    <span class="fs14 c-333">2018-12-11</span>
                                </section>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r hide time-input-box">
                                    <input placeholder="开始时间"
                                           readonly
                                           id="userStatTimeLaydate"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                    <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                    <input placeholder="结束时间"
                                           readonly
                                           id="userEndTimeLaydate"
                                           name="endTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>
                    </div>
                </div>
                <div class="ibox-content stat-iv-data__wrap stat-data__box">

                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="user-loading-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->

                    <div class="row">
                        <section class="col-sm-3">
                            <section class="iv-data-item">
                                <span class="fs12 c-999">新增用户</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，第一次访问平台的用户数"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000 vam" id="regUserCount">--</strong>
                                    <span class="fs14 c-222 vam hide">万</span>
                                </aside>
                            </section>
                        </section>
                        <section class="col-sm-3">
                            <section class="iv-data-item">
                                <span class="fs12 c-999">活跃用户</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，访问过平台的用户数"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000 vam" id="activeUserCount">--</strong>
                                    <span class="fs14 c-222 vam hide">万</span>
                                </aside>
                            </section>
                        </section>
                        <section class="col-sm-3">
                            <section class="iv-data-item">
                                <span class="fs12 c-999">付费用户</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，付款成功的用户数，一人多次付款记为一人"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000 vam" id="payUserCount">--</strong>
                                    <span class="fs14 c-222 vam hide">万</span>
                                </aside>
                            </section>
                        </section>
                        <section class="col-sm-3">
                            <section class="iv-data-item">
                                <span class="fs12 c-999">总用户数</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，访问过平台的全部用户数"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000 vam" id="userCount">--</strong>
                                    <span class="fs14 c-222 vam hide">万</span>
                                </aside>
                            </section>
                        </section>
                    </div>

                    <div class="m-t">
                        <div class="transaction-state-chart__wrap pt10" id="user-trend-board">
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>付款用户概况</h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r">
                                    <input placeholder="查询至"
                                           readonly
                                           id="payUserStatTimeLaydate"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>
                    </div>
                </div>
                <div class="ibox-content stat-iv-data__wrap stat-data__box">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>类型</th>
                                <th>客户数<span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，新付费用户-用户数：筛选时间之前没有在平台付过费，在筛选时间内在平台首次付款的用户数量。<br />
老付费用户-用户数：筛选时间内，在平台内有付款，且首次付款是在筛选时间之前的用户数 。"><i class="fa fa-exclamation-circle"></i></span></th>
                                <th>客户数占比<span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，新付费用户-用户数占比：筛选时间内，新付费用户数 / 全部付费用户数。<br />
老付费用户-用户数占比：筛选时间内，老付费用户数 / 全部付费用户数"><i class="fa fa-exclamation-circle"></i></span></th>
                                <th>平均客单价(元)<span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，全部付费用户-客单价：筛选时间内，全部付费用户的付款金额/用户数<br />
新付费用户-客单价：筛选时间内，新付费用户的付款金额/新付费用户数<br />
老付费用户-客单价：筛选时间内，老付费用户的付款金额/老付费用户数"><i class="fa fa-exclamation-circle"></i></span></th>
                                <th>付款金额(元)<span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，全部付费用户-付款金额(元)：筛选时间内，全部付费用户的付款金额之和。<br />
新付费用户-付款金额(元)：筛选时间内，新付费用户的付款金额之和。<br />
老付费用户-付款金额(元)：筛选时间内，老付费用户成功付款订单的金额之和。"><i class="fa fa-exclamation-circle"></i></span></th>
                                <th>付款转化率<span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，全部付费用户-访问-付款转化率：筛选时间内，全部付费用户数 / 平台用户数。<br />
新付费用户-访问-付款转化率：筛选时间内，新付费用户数 / 平台中未购买记录的用户数。<br />
老付费用户-访问-付款转化率：筛选时间内，老付费用户数 / 访问过平台的付费用户数。"><i class="fa fa-exclamation-circle"></i></span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="background-color: #f2f2f2">
                                <td>全部付款用户</td>
                                <td id="payUserNum">--</td>
                                <td id="userShare">100%</td>
                                <td id="averagePrice">--</td>
                                <td id="payPrice">--</td>
                                <td id="conversionRate">--</td>
                            </tr>
                            <tr>
                                <td>付款新用户</td>
                                <td id="newPayUserNum">--</td>
                                <td id="newUserShare">--</td>
                                <td id="newAveragePrice">--</td>
                                <td id="newPayPrice">--</td>
                                <td id="newConversionRate">--</td>
                            </tr>
                            <tr>
                                <td>付款老用户</td>
                                <td id="oldPayUserNum">--</td>
                                <td id="oldUserShare">--</td>
                                <td id="oldAveragePrice">--</td>
                                <td id="oldPayPrice">--</td>
                                <td id="oldConversionRate">--</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>用户注册渠道概况</h5>
                </div>
                <div id="user-reg-form-box" class="ibox-content stat-iv-data__wrap stat-data__box">

                </div>
            </div>
        </div>

    </div>
    <div data-th-replace="layout/head-footer"></div>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/echarts/echarts.min.3.0.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/time-utils.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/users/users-statistics.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>

